<template>
  <xdh-echarts :options="options"
               :width="width"
               :height="height"></xdh-echarts>
</template>

<script>
  import XdhEcharts from '../widgets/xdh-echarts'

  // 各节点、直角的位置
  const data = [
    {
      name: 'bg',
      value: [60, 177.5],
      symbol: 'image://' + require('../assets/flow/sjy-bg.png'),
      symbolSize: [120, 222],
      label: {
        normal: {show: false}
      }
    },
    {
      name: '数据源',
      value: [70, 160],
      symbol: 'image:// ' + require('../assets/flow/icon-sjy.png'),
      symbolSize: [41, 48]
    },
    {
      name: '数据源1',
      value: [135, 160]
    },
    {
      name: '原始库1',
      value: [135, 250]
    },
    {
      name: '原始库',
      value: [200, 250],
      symbol: 'image://' + require('../assets/flow/icon-ysk.png'),
      symbolSize: [46, 51],
      label: {
        normal: {
          position: 'top'
        }
      }
    },
    {
      name: '预处理库',
      value: [295, 250],
      symbol: 'image://' + require('../assets/flow/icon-yclk.png'),
      symbolSize: [48, 49],
      label: {
        normal: {
          position: 'top'
        }
      }
    },
    {
      name: '标准库',
      value: [390, 250],
      symbol: 'image://' + require('../assets/flow/icon-bzk.png'),
      symbolSize: [38, 44],
      label: {
        normal: {
          position: 'top'
        }
      }
    },
    {
      name: '标准库1',
      value: [475, 250]
    },
    {
      name: '流式数据库1',
      value: [135, 45]
    },
    {
      name: '流式数据库',
      value: [300, 45],
      symbol: 'image://' + require('../assets/flow/icon-lssjk.png'),
      symbolSize: [41, 52],
      label: {
        normal: {
          position: 'top'
        }
      }
    },
    {
      name: '智慧搜索1',
      value: [475, 330]
    },
    {
      name: '智慧搜索',
      value: [680, 330],
      symbol: 'image://' + require('../assets/flow/icon-zhss.png'),
      symbolSize: [43, 44],
      label: {
        normal: {
          position: 'right'
        }
      }
    },
    {
      name: '标识库1',
      value: [475, 290]
    },
    {
      name: '标识库2',
      value: [615, 290]
    },
    {
      name: '标识库',
      value: [550, 290],
      symbol: 'image://' + require('../assets/flow/icon-bsk.png'),
      symbolSize: [40, 40]
    },
    {
      name: '主题库1',
      value: [475, 205]
    },
    {
      name: '主题库2',
      value: [615, 205]
    },
    {
      name: '主题库',
      value: [550, 205],
      symbol: 'image://' + require('../assets/flow/icon-ztk.png'),
      symbolSize: [43, 36]
    },
    {
      name: '关系库1',
      value: [475, 125]
    },
    {
      name: '关系库',
      value: [550, 125],
      symbol: 'image://' + require('../assets/flow/icon-gxk.png'),
      symbolSize: [40, 45]
    },
    {
      name: '关系分析',
      value: [680, 125],
      symbol: 'image://' + require('../assets/flow/icon-gxfx.png'),
      symbolSize: [48, 49]
    },
    {
      name: '轨迹库1',
      value: [475, 55]
    },
    {
      name: '轨迹库2',
      value: [555, 55]
    },
    {
      name: '轨迹库',
      value: [555, 45],
      symbol: 'image://' + require('../assets/flow/icon-gjk.png'),
      symbolSize: [48, 40]
    },
    {
      name: '轨迹分析',
      value: [680, 45],
      symbol: 'image://' + require('../assets/flow/icon-gjfx.png'),
      symbolSize: [52, 40],
      label: {
        normal: {
          position: 'right'
        }
      }
    },
    {
      name: '战法市场',
      value: [680, 250],
      symbol: 'image://' + require('../assets/flow/icon-zfsc.png'),
      symbolSize: [47, 39],
      label: {
        normal: {
          position: 'right'
        }
      }
    },
    {
      name: '战法市场1',
      value: [615, 250]
    }
  ]

  // 线条连接
  const links = [
    {
      source: '数据源',
      target: '数据源1'
    },
    {
      source: '数据源1',
      target: '原始库1'
    },
    {
      source: '原始库1',
      target: '原始库'
    },
    {
      source: '原始库',
      target: '预处理库'
    },
    {
      source: '预处理库',
      target: '标准库'
    },
    {
      source: '标准库',
      target: '标准库1'
    },
    {
      source: '数据源1',
      target: '流式数据库1'
    },
    {
      source: '流式数据库1',
      target: '流式数据库'
    },
    {
      source: '流式数据库',
      target: '轨迹库'
    },
    {
      source: '标准库1',
      target: '智慧搜索1'
    },
    {
      source: '标准库1',
      target: '轨迹库1'
    },
    {
      source: '轨迹库1',
      target: '轨迹库2'
    },
    {
      source: '智慧搜索1',
      target: '智慧搜索'
    },
    {
      source: '标识库1',
      target: '标识库'
    },
    {
      source: '标识库',
      target: '标识库2'
    },
    {
      source: '主题库1',
      target: '主题库'
    },
    {
      source: '主题库',
      target: '主题库2'
    },
    {
      source: '关系库1',
      target: '关系库'
    },
    {
      source: '关系库',
      target: '关系分析'
    },
    {
      source: '轨迹库',
      target: '轨迹分析'
    },
    {
      source: '战法市场1',
      target: '战法市场'
    },
    {
      source: '标识库2',
      target: '战法市场1'
    },
    {
      source: '主题库2',
      target: '战法市场1'
    }
  ]

  // 如需按照直角流动必须要经过设置直角的节点
  const coordData = [
    // 数据源-流式数据库-轨迹分析
    {
      coords: [
        [70, 160],
        [135, 160],
        [135, 45],
        [680, 45]
      ]
    },
    {
      coords: [
        [70, 160],
        [135, 160],
        [135, 250],
        [475, 250],
        [475, 330],
        [680, 330]
      ]
    },
    // 数据源-标准库-标识库-战法市场
    {
      coords: [
        [70, 160],
        [135, 160],
        [135, 250],
        [475, 250],
        [475, 290],
        [615, 290],
        [615, 290],
        [615, 250],
        [680, 250]
      ]
    },
    // 数据源-标准库-主题库-战法市场
    {
      coords: [
        [70, 160],
        [135, 160],
        [135, 250],
        [475, 250],
        [475, 205],
        [615, 205],
        [615, 250],
        [680, 250]
      ]
    },
    // 数据源-标准库-关系库-关系分析
    {
      coords: [
        [70, 160],
        [135, 160],
        [135, 250],
        [475, 250],
        [475, 125],
        [680, 125]
      ]
    },
    // 数据源-标准库-轨迹库-轨迹分析
    {
      coords: [
        [70, 160],
        [135, 160],
        [135, 250],
        [475, 250],
        [475, 55],
        [475, 55],
        [555, 55],
        [555, 45],
        [680, 45]
      ]
    }
  ]

  export default {
    components: {
      XdhEcharts
    },
    props: {
      width: String,
      height: String
    },
    computed: {
      options() {
        return {
          grid: {
            top: 0,
            left: 0,
            right: 0,
            bottom: 0
          },
          xAxis: {
            silent: true,
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            max: 780,
            min: 0
          },
          yAxis: {
            silent: true,
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            max: 360,
            min: 0
          },
          series: [
            // 节点和线条层
            {
              zlevel: 2,
              type: 'graph',
              layout: 'force',
              coordinateSystem: 'cartesian2d',
              symbolSize: 0,
              data: data,
              links: links,
              label: {
                normal: {
                  show: true,
                  position: 'bottom',
                  textStyle: {
                    fontSize: 18,
                    color: '#fefefe'
                  }
                }
              },
              lineStyle: {
                normal: {
                  type: 'dotted',
                  width: 3,
                  color: '#1e7ed7',
                  opacity: 1,
                  curveness: 0
                }
              }
            },
            // 流动箭头层
            {
              coordinateSystem: 'cartesian2d',
              type: 'lines',
              polyline: true,
              zlevel: 1,
              effect: {
                show: true,
                color: '#0AE94C',
                period: 10,
                trailLength: 0,
                symbolSize: [13, 41],
                symbol: 'image://' + require('../assets/flow/icon-light.png'),
                loop: true
              },
              lineStyle: {
                normal: {
                  type: 'dotted',
                  width: 2,
                  color: '#1e7ed7',
                  opacity: 1,
                  curveness: 0
                }
              },
              data: coordData
            }
          ]
        }
      }
    }
  }
</script>
